<template>
    <div class="footerMusic" :style="{ bottom: onStyle || '48px' }">
        <router-link to="/musicDetail">
            <div class="footerLeft" @click="updateDetail">
              <img :src="playList[playListIndex].al.picUrl" alt="">
              <div>
                <p>{{ playList[playListIndex].al.name }}</p>
                <span>横滑可以切换上下首哦</span>
              </div>
            </div>
        </router-link>
        <div class="footerRight">
            <svg class="icon" aria-hidden="true" @click="changePlayMusic" v-if="isBtnShow ">
                <use xlink:href="#icon-bofang2"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="changePlayMusic" v-else>
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao3"></use>
            </svg>
            <Play :id="this.playList[this.playListIndex].id" ref="playMusic" />

        </div>
</div>
</template>

<script>
import Play from '@/views/Play/Play.vue'
import { mapMutations, mapState } from 'vuex'
export default {
    props: ['onStyle'],
    components: { Play },
    mounted() {

        // this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)

    },
    computed: {
      ...mapState(['playList', 'playListIndex', 'isBtnShow', 'detailShow', 'currentTime', 'isPlaying', 'lyrIcList']),
    },
    data() {
        return {

        }
    },
  updated() {

      this.$refs.playMusic.addDuration()
    this.$refs.playMusic.addCurrent()
  },
  watch: {
    immediate: true,
    currentTime() {

    },
    playList() {
      console.log('playListIndex变了', this.playListIndex);
      this.$store.dispatch('getLyric', this.playList[this.playListIndex].id);
    },

  },
  methods: {
    async updateDetail() {
      await this.updateDetailShow();
      await this.$store.dispatch('getLyric', this.playList[this.playListIndex].id);
      await localStorage.setItem('lyrIcList', JSON.stringify(this.lyrIcList));
      await localStorage.setItem('playList', JSON.stringify(this.playList));
      await localStorage.setItem('playListIndex', JSON.stringify(this.playListIndex));
    },
    changePlayMusic() {
      this.$refs.playMusic.changePlay();
    },
    ...mapMutations([
      'updatePlayList',
      'updatePlayListIndex',
      'updateDetailShow',
      'updateIsbtnShow',
      'updateCurrentTime',
      'updateDuration']),
  },
}


</script>
<style lang="less" scoped>
.footerMusic {
    width: 100%;
    height: 1.4rem;
    position: fixed;
    background: white;
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .footerLeft {
        display: flex;
        justify-content: space-around;
        height: 100%;
        width: 100%;
        align-items: center;
        font-size: 14px;
        margin-right: 15px;

        span {
            font-size: 10px;
            color: #33343c;
        }

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }

    .footerRight {
        display: flex;
        align-items: center;
        margin-right: 15px;

        .icon {
            width: 0.7rem;
            height: 0.7rem;
            margin-right: 10px;
        }
    }
}
</style>